<html class="x-admin-sm" lang="en"
      xmlns:th="https://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
  <meta charset="utf-8">
  <title>
    上传人员技能
  </title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="format-detection" content="telephone=no">
</head>
<link rel="stylesheet" th:href="@{/assets/admin/css/font.css}">
<link rel="stylesheet" th:href="@{/assets/admin/css/xadmin.css}">
<script th:src="@{/assets/admin/lib/layui/layui.js}" charset="utf-8"></script>
<script type="text/javascript" th:src="@{/assets/admin/js/xadmin.js}"></script>
<!--[if lt IE 9]>
<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
<script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<style type="text/css">
  .layui-form-label{
    width: 120px
  }
</style>

<body class="layui-bg-gray">
<div class="x-nav">
            <span class="layui-breadcrumb">
                <a href="">导入</a>
                <a>
                    <cite>上传人员技能</cite>
                </a>
            </span>
</div>
<div class="layui-fluid">
  <div id="loadDiv" style="text-align: center">
    <div class="layui-upload-drag" id="test10">
      <i class="layui-icon"></i>
      <p>点击上传，或将文件拖拽到此处</p>
      <div class="layui-hide" id="uploadDemoView">
        <hr>
        <!-- <img src="" alt="上传成功后渲染" style="max-width: 196px">-->
        <a id="fileNames" style="font-size:16px;color:#000;" data-title></a><i class="layui-icon" id="resetUpload" style="font-size: 18px;">&#x1006;</i>
      </div>
    </div>
    <div style="margin-top:40px;width:100%;text-align: center" >
      <button class="layui-btn layui-btn-normal" lay-submit lay-filter="upload" id="uploadBtn">
        <i class="layui-icon">&#xe67c;</i>上传</button>
      <button class="layui-btn" lay-filter="upload" onclick="downloadTemplate()">
        <i class="layui-icon">&#xe601;</i>下载模板</button>
    </div>
  </div>
</div>
<script th:src="@{/assets/admin/js/jquery.min.js}"></script>
<script th:replace="systemCommon/HarinCommon :: commonJs"></script>
<script type="text/javascript" th:inline="javascript">
  $(function(){
    $("#fileNames").hover(function () {
      let title = $(this).attr("data-title");
      tipId = layer.tips(title, this, {tips: 3});
    }, function () {
      layer.close(tipId);
    });

  });
  layui.use(["layer","upload","form"], function () {
    upload = layui.upload;
    form = layui.form;

    let uploadObj = {
      elem: '#test10',
      url: '/qrcode/uploadPersonJobExcel' ,//改成您自己的上传接口
      exts: "xlsx",                       //限定格式
      accept: "file",
      number: 1,
      auto : false,
      choose:function(obj){ //选择文件后的方法
        obj.preview(function(index, file, result){
          $("#uploadDemoView").removeClass("layui-hide");
          $("#fileNames").attr("data-title",file.name);
          $("#fileNames").text(file.name.substring(0,15)+"...");
        });
      },
      bindAction : "#uploadBtn",
      before:function(obj){       //上传前的方法
        if(obj == null){
          layer.msg('请先选择文件！');
        }
      },
      done: function(data){
        if (data.code == 200) {
          layer.alert(data.message, {icon: 6}, function (iIndex) {
            // 获得frame索引
            var index = parent.layer.getFrameIndex(window.name);
            //关闭当前frame
            parent.layer.close(index);
          });
        } else {
          layer.alert(data.message, {icon: 5}, function (iIndex) {
            // 获得frame索引
            var index = parent.layer.getFrameIndex(window.name);
            //关闭当前frame
            //parent.layer.close(index);
            layer.close(iIndex);
          });
        }
      }
    };
    let uploadDiv = upload.render(uploadObj);

    $("#resetUpload").click(function(event){
      uploadDiv.reload(uploadObj);
      $("#uploadDemoView").addClass("layui-hide");
      event.stopPropagation();
    });

  });

  String.format = function() {
    var s = arguments[0];
    for (var i = 0; i < arguments.length - 1; i++) {
      var reg = new RegExp("\\{" + i + "\\}", "gm");
      s = s.replace(reg, arguments[i + 1]);
    }
    return s;
  }

  function downloadTemplate(){
      window.open("/qrcode/downloadPersonTemplate");
  }

</script>
</body>
</html>